<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <body>
    <div id="root"></div>
    <script type="text/babel">

      function Login(props){

        return <button onClick={props.updateInfo}>子组件logIn</button>
      }

      function Logout(props) {
        
        return <button onClick={props.updateInfo}>子组件logOut</button>
        }

      class App extends React.Component {
          state = {
            isLogin:true
          }
          updateInfo=(props)=>{
          this.setState({
            isLogin:!this.state.isLogin
          })
        }
        // 传值和传方法和vue中的props差不多可以直接传方法
          render(){
            return <div>
              {this.state.isLogin ? <Logout updateInfo={this.updateInfo}/> : <Login updateInfo={this.updateInfo}/>}
              </div>
          }
        }
        
        ReactDOM.render(<App />, document.getElementById('root'))
        
    </script>
  </body>
</html>
